
$container = $('.container')
let str = ``,
  $imgBoxs = null,
$window = $(window)
new Array(20).fill(null).forEach(item => {
  str += `  <div class="imgBox">
  <img src="" data-img="http://img.netbian.com/file/2021/0426/smallcfbe288cf327e02e500f979bdfaf90781619446168.jpg">
</div> `
})
// console.log(str);
$container.html(str)
$imgBoxs = $container.children('.imgBox')
$window.on('load scroll', function () {
  let $B = $window.outerHeight() + $window.scrollTop()
  $imgBoxs.each((index, item) => {
    let $item = $(item),
      $itemA = $item.outerHeight() + $item.offset().top,
      isLoad = $item.attr('isLoad')
    if ($itemA <= $B && isLoad !=='true') {
      $item.attr('isLoad','true')
      let $img = $item.children('img')
      $img.attr('src', $img.attr('data-img'))
      $img.on('load', ()=>$img.stop().fadeIn())
     
    }
    
  })

}) 